<template>
    <div class="box2">
        <ul>
            <li v-for="(todo) in todos" :key="todo.id">
                {{ todo.text }}
                <button @click="removeTodo(todo.id)">删除</button>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        todos: {
            type: Array,
            required: true
        }
    },
    methods: {
        removeTodo(id) {
            this.$emit('removeTodo', id);
        }
    }
};
</script>

<style scoped>
.box2 {
    margin-top: 20px;
}

.box2 ul {
    list-style-type: none;
}

.box2 li {
    margin-bottom: 10px;
}

.box2 button {
    float: right;
    background-color: #5a86a6;
    color: white;
    border: none;
    padding: 5px 10px;
    margin-left: 10px;
}
</style>
